<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .border{
            border:5px aquamarine solid;
        }
        .font{
            font-size: 50px;
        }
        .font1{
            font-size: 100px;
        }
        .font2{
            width: 400px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div id="div1" style="color: red;" class="border" title="div1">
        div1
        <div id="div1child" style="background-color: yellow;width: 400px;">这个是div1child</div>
    </div>
    <img src="../img/yun.png" width="150px" height="300px"><br>
    <input id="username"></input>
    
    <script>
        //js操作属性1
        let div1 = document.getElementById("div1")
        div1.title = "12"
        div1.style.color = "pink"
        div1.style.backgroundColor = "purple"
            //22
        div1.setAttribute("title", "666")
        let title = div1.getAttribute("title")

        let img=document.getElementsByTagName("img")[0]
        console.log(img)
        img.style.border="5px pink solid"
        img.className="myfont"
        
        // div1.className="border1"
        div1.classList.add("font")
        console.log(div1.classList.contains("font"))
        
        div1.onclick=()=>{
            // console.log("hello")
            div1.classList.toggle("font1")
        }
        img.addEventListener("click",function(){
            img.classList.toggle("font2")
        })
        // img.addEventListener("mouseenter",function(){
        //     console.log("鼠标进入图片区域")
        // })
        // img.addEventListener("mouseleave",function(){
        //     console.log("鼠标移出图片区域")
        // })
        // img.addEventListener("mousemove",function(){
        //     console.log("鼠标在图片区域移动")
        // })
        let username=document.getElementById("username")
        username.addEventListener("keydown",()=>{
            console.log("键盘某个键被按下并抬起")
        })
        username.addEventListener("keyup",(event)=>{
            console.log("键盘某个键被按下",event.key,event.code)
        })
        //事件的捕获和冒泡
    div1.addEventListener('click', function (e) {
        console.log('[div1 捕获阶段] 事件从外向里，当前 target=', e.target.id);
    }, true);

    div1.addEventListener('click', function (e) {
        console.log('[div1 冒泡阶段] 事件从里向外，当前 target=', e.target.id);
    }, false);

    img.addEventListener('click', function (e) {
        console.log('[img  捕获阶段]');
    }, true);

    img.addEventListener('click', function (e) {
        console.log('[img  冒泡阶段]');
    }, false);

    username.addEventListener('keydown', function (e) {
        console.log('[input 捕获] key=', e.key);
    }, true);

    username.addEventListener('keydown', function (e) {
        console.log('[input 冒泡] key=', e.key);
    }, false);

    </script>
</body>

</html>